﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Copy to Clipboard with ZeroClipboard, Flash 10 and jQuery</title>
    <link href="_assets/css/Style.css" rel="stylesheet" type="text/css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

    <script src="_assets/js/ZeroClipboard.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            $("#customerTable tbody tr:odd").addClass("altrow");
            $("#customerTable tbody tr:even").addClass("row");

            $("#customerTable tbody td:last-child").each(function() {
                //Create a new clipboard client
                var clip = new ZeroClipboard.Client();

                //Cache the last td and the parent row    
                var lastTd = $(this);
                var parentRow = lastTd.parent("tr");

                //Glue the clipboard client to the last td in each row
                clip.glue(lastTd[0]);

                //Grab the text from the parent row of the icon
                var txt = $.trim($("td:first-child", parentRow).text()) + "\r\n" + $.trim($("td:nth-child(2)", parentRow).text()) + "\r\n" +
                $.trim($("td:nth-child(3)", parentRow).text()) + "\r\n" + $.trim($("td:nth-child(4)", parentRow).text());
                clip.setText(txt);

                //Add a complete event to let the user know the text was copied
                clip.addEventListener('complete', function(client, text) {
                    alert("Copied text to clipboard:\n" + text);
                });
            });
        });                               
    </script>

</head>
<body>
    <form>
    <h1>
        Copy to Clipboard with ZeroClipboard, Flash 10 and jQuery</h1>
    <b>Instructions:</b>
    <ul>
        <li>Click the copy icon at the end of one of the customer rows. </li>
        <li>Paste the contents of the clipboard into the text area below the table. </li>
    </ul>
    <div class="demo">
        <table id="customerTable" class="yui-grid">
            <thead>
                <tr>
                    <th>
                        ID
                    </th>
                    <th>
                        Company
                    </th>
                    <th>
                        Contact
                    </th>
                    <th>
                        Fax
                    </th>
                    <th>
                        &nbsp;
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        HUNGC
                    </td>
                    <td>
                        Hungry Coyote Import Store
                    </td>
                    <td>
                        Yoshi Latimer
                    </td>
                    <td>
                        (503) 555-2376
                    </td>
                    <td>
                        <img src="_assets/img/page_white_copy.png" alt="copy to clipboard" title="Copy to Clipboard" />
                    </td>
                </tr>
                <tr>
                    <td>
                        LAZYK
                    </td>
                    <td>
                        Lazy K Kountry Store
                    </td>
                    <td>
                        John Steel
                    </td>
                    <td>
                        (509) 555-6221
                    </td>
                    <td>
                        <img src="_assets/img/page_white_copy.png" alt="copy to clipboard" title="Copy to Clipboard" />
                    </td>
                </tr>
                <tr>
                    <td>
                        LONEP
                    </td>
                    <td>
                        Lonesome Pine Restaurant
                    </td>
                    <td>
                        Fran Wilson
                    </td>
                    <td>
                        (503) 555-9646
                    </td>
                    <td>
                        <img src="_assets/img/page_white_copy.png" alt="copy to clipboard" title="Copy to Clipboard" />
                    </td>
                </tr>
                <tr>
                    <td>
                        OLDWO
                    </td>
                    <td>
                        Old World Delicatessen
                    </td>
                    <td>
                        Rene Phillips
                    </td>
                    <td>
                        (907) 555-2880
                    </td>
                    <td>
                        <img src="_assets/img/page_white_copy.png" alt="copy to clipboard" title="Copy to Clipboard" />
                    </td>
                </tr>
                <tr>
                    <td>
                        RATTC
                    </td>
                    <td>
                        Rattlesnake Canyon Grocery
                    </td>
                    <td>
                        Paula Wilson
                    </td>
                    <td>
                        (505) 555-3620
                    </td>
                    <td>
                        <img src="_assets/img/page_white_copy.png" alt="copy to clipboard" title="Copy to Clipboard" />
                    </td>
                </tr>
                <tr>
                    <td>
                        SPLIR
                    </td>
                    <td>
                        Split Rail Beer & Ale
                    </td>
                    <td>
                        Art Braunschweiger
                    </td>
                    <td>
                        (307) 555-6525
                    </td>
                    <td>
                        <img src="_assets/img/page_white_copy.png" alt="copy to clipboard" title="Copy to Clipboard" />
                    </td>
                </tr>
                <tr>
                    <td>
                        THECR
                    </td>
                    <td>
                        The Cracker Box
                    </td>
                    <td>
                        Liu Wong
                    </td>
                    <td>
                        (406) 555-8083
                    </td>
                    <td>
                        <img src="_assets/img/page_white_copy.png" alt="copy to clipboard" title="Copy to Clipboard" />
                    </td>
                </tr>
                <tr>
                    <td>
                        TRAIH
                    </td>
                    <td>
                        Trail's Head Gourmet Provisioners
                    </td>
                    <td>
                        Helvetius Nagy
                    </td>
                    <td>
                        (206) 555-2174
                    </td>
                    <td>
                        <img src="_assets/img/page_white_copy.png" alt="copy to clipboard" title="Copy to Clipboard" />
                    </td>
                </tr>
                <tr>
                    <td>
                        WHITC
                    </td>
                    <td>
                        White Clover Markets
                    </td>
                    <td>
                        Karl Jablonski
                    </td>
                    <td>
                        (206) 555-4115
                    </td>
                    <td>
                        <img src="_assets/img/page_white_copy.png" alt="copy to clipboard" title="Copy to Clipboard" />
                    </td>
                </tr>
            </tbody>
        </table>
        <div style="padding-top: 20px;">
            <textarea rows="5" cols="40"></textarea><br />
        </div>
        <button type="reset">
            Reset</button>
    </div>
    </form>
</body>
</html>
